<template>
    <div class="window" :style="{ width: width + 'px' }" v-if="show">
        <div class="title">
        <span class="iconfont icon-back"
              @click="close"></span>
        </div>
        <div class="body">
            <slot></slot>
            <!-- 内容区域 -->
        </div>
        <template v-if="buttons && buttons.length > 0 || showCancel">
            <div class="footer">
                <el-button link @click="close">取消</el-button>
                <el-button
                        v-for="(btn, index) in buttons"
                        :key="index"
                        :type="btn.type"
                        @click="btn.click"
                >
                    {{ btn.text }}
                </el-button>
            </div>
        </template>
    </div>
</template>

<script setup>
    import {ref, onMounted} from 'vue';

    const width = ref(window.innerWidth - 280);

    const props = defineProps({
        show: {
            type: Boolean,
            default: false,
        },
        buttons: {
            type: Array,
        },
        showCancel: {
            type: Boolean,
            default: true,
        },
    });

    // 监听窗口大小变化，动态更新宽度
    onMounted(() => {
        window.addEventListener('resize', handleResize);
    });

    const handleResize = () => {
        width.value = window.innerWidth - 280;
    };
    const emit = defineEmits(["close"]);
    const close = () => {
        emit("close")
    }
</script>

<style lang="scss">
    .window {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        background: #fff;
        z-index: 50;
        display: flex;
        flex-direction: column;

        .title {
            height: 30px;
            display: flex;
            align-items: center;
            padding-left: 10px;

            .icon-back {
                font-size: 25px;
            }
        }

        .body {
            flex: 1;
            overflow-y: auto; /* 添加滚动条 */
            padding: 10px;
        }

        .footer {
            border-top: 1px solid #ddd;
            text-align: center;
            line-height: 50px;
        }
    }
</style>
  